<!DOCTYPE html>
<html>
<head>
	<title>About</title>
	<!--fonts-->
		<link href='http://fonts.useso.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
		<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
	<!--//fonts-->
			<link href="css/bootstrap.css" rel="stylesheet">
			<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!-- for-mobile-apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Music World Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
		Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //for-mobile-apps -->	
	<!-- js -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
	<!-- js -->
	<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div class="header">
	<div class="container">
		<div class="header-left">
			<a href="index.html">Music World</a>
		</div>
		<div class="navigation">
			<nav class="navbar navbar-default">
					<div class="navbar-header">
						  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"> </span>
							<span class="icon-bar"> </span>
							<span class="icon-bar"> </span>
						  </button>
					</div>
					<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
						  <ul class="nav navbar-nav">
							<li class="hvr-bounce-to-bottom"><a href="index.html">HOME <span class="sr-only">(current)</span></a></li>
							<li class="hvr-bounce-to-bottom active"><a href="about.html">ABOUT</a></li>
							<li class="hvr-bounce-to-bottom"><a href="album.html">ALBUM</a></li>
							<li class="hvr-bounce-to-bottom"><a href="typography.html">ARTISTS</a></li>
							<li class="hvr-bounce-to-bottom"><a href="contact.html">CONTACT</a></li>
						  </ul>
						<div class="clearfix"> </div>
					</div><!-- /.navbar-collapse -->
			</nav>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //header -->
<!-- banner -->
<div class="banner page-head">
</div>
<!-- //banner -->
<!--start-about-->
<div class="about two">
		<div class="container">
		 <h3 class="tittle">ABOUT</h3>
				<div class="about-top">
					<div class="col-md-5 about-top-left">
						<img src="images/ab.jpg" class="img-responsive" alt=""/>
					</div>
					<div class="col-md-7 about-top-right">
						<h4>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</h4>
						<p>Fusce feugiat malesuada odio orbi nunc odio gravida at cursus nec luctus a lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna onec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend.</p>
						<p>Bulum iaculis lacinia est. Proin dictum elemntum velit. Fusce euismod cons equat ante. Lorem ipsum dmeconsectetuer adipiscing elit. ellentesque sed dolor. Aliquam congue fermentum nisl. </p>
					</div>
					<div class="clearfix"></div>
				</div>
		</div>	 
</div>
<!--start-team-->
<div class="team">
	<div class="container">
		<h3 class="tittle">OUR TEAM</h3>
			<div class="main">
				<div class="col-md-3 view-grid">
					<div class="view fifth-effect">
						 <a href="#" title="Full Image"><img src="images/team-1.jpg" /></a>
						 <div class="mask"></div>
					</div> 
				</div>
				<div class="col-md-3 view-grid">
					<div class="view fifth-effect">
						 <a href="#" title="Full Image"><img src="images/team-2.jpg" /></a>
						 <div class="mask"></div>
					</div> 
				</div>
				<div class="col-md-3 view-grid">
					<div class="view fifth-effect">
						 <a href="#" title="Full Image"><img src="images/team-3.jpg" /></a>
						 <div class="mask"></div>
					</div> 
				</div>
				<div class="col-md-3 view-grid">
					<div class="view fifth-effect">
						 <a href="#" title="Full Image"><img src="images/team-4.jpg" /></a>
						 <div class="mask"></div>
					</div> 
				</div>
				<div class="clearfix"></div>
			</div>
	</div>
</div>
<!--//team-->
<!--start-camps-->
<div class="camps">
	<div class="container">
		<h3 class="tittle mid">MIDWESTERN MUSIC CAMP</h3>
			<div class="cam-top-top">
				<div class="col-md-7 cam-top">
					<iframe src="https://www.youtube.com/embed/j5FI2Y4QGU4" frameborder="0" allowfullscreen></iframe>
				</div>
				<div class="col-md-5 cam-top-text">
				   <div class="sub-cam-top">
				       <div class="sub-img">
							<img src="images/2222.jpg" alt="img07"/>
					   </div>
					   <div class="sub-text">
					   		 <a href="#">Artist 1 : Nam nec tellus a tincidunt auctor.</a>
							 <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
					   </div>
					    <div class="clearfix"> </div>
				   </div>
				    <div class="sub-cam-top">
				       <div class="sub-img">
							<img src="images/3333.jpg" alt="img07"/>
					   </div>
					   <div class="sub-text">
					   		 <a href="#">Artist 2 : Nam nec tellus a tincidunt auctor.</a>
							 <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
					   </div>
					    <div class="clearfix"> </div>
				    </div>
				    <div class="sub-cam-top">
				       <div class="sub-img">
							<img src="images/1111.jpg" alt="img07"/>
					   </div>
					   <div class="sub-text">
					   		 <a href="#">Artist 3 : Nam nec tellus a tincidunt auctor.</a>
							 <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
					   </div>
					    <div class="clearfix"> </div>
				    </div>
				</div>
				<div class="clearfix"> </div>
			</div>
	</div>
</div>
<!-- footer -->
<div class="footer">
	<div class="container">
		<div class="footer-grids">	
			<div class="col-md-3 footer-grid">
				<h4>ADDRESS</h4>
				<ul>
					<li>Music World</li>
					<li>4111 Deer Haven Drive Greenville </li>
					<li>SC 29601 </li>
					<li>Hours: Mon-Fri 9am - 6:00pm</li>
				</ul>
			</div>
			<div class="col-md-3 footer-grid">
				<h4>GET IN TOUCH</h4>
				<ul>
					<li>Tel: +1 234-567-890</li>
					<li>Fax: +1 646-216-9789</li>
					<li>Email: <a href="mailto:info@example.com">info@yourdomain.com </a></li>
				</ul>
			</div>
			<div class="col-md-3 footer-grid">
				<h4>SUBSCRIBE</h4>
				<form>
					<input type="email" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}" required="">
					<input type="submit" value=" ">
				</form>
			</div>
			<div class="col-md-3 footer-grid">
				<h3><a href="index.html">MUSIC WORLD</a></h3>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //footer -->
<!-- copy -->
<div class="copy-right">
	<div class="container">
		<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
</div>
<!-- copy -->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->


<!-- for bootstrap working -->
		<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
</body>
</html>